<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="../static/js/axios.js"></script>
    <link rel="icon" href="../static/imgs/cms.png" type="image/png">
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../static/css/Home.css">
    <script src="../static/js/jQuery.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #fe6b00;color: white;font-weight: bold">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">提示！！</h4>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
      <!--导航栏--->
      <nav class="navbar navbar-default nav_bottom">
          <div class="container-fluid">
              <!-- Brand and toggle get grouped for better mobile display -->
              <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="#" style="font-weight: 900;font-size: 40px"><span style="color: #fc5531;">c</span>sdn</a>
              </div>

              <!-- Collect the nav links, forms, and other content for toggling -->
              <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                  <ul class="nav navbar-nav">
                      <li><a href="#"><span>首页</span></a></li>
                  </ul>
                  <form class="navbar-form navbar-left">
                      <div class="form-group">
                          <label>
                              <input type="text" class="form-control search-input" placeholder="请输入关键字......">
                          </label>
                      </div>
                      <a class="btn btn-default btn-search search-blog" href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>搜索</a>
                  </form>
                  <ul class="nav navbar-nav navbar-right">
                      <li class="user-head-icon">
                          <img src="" class="user-head" alt="">
                          <div class="drop-box" style="display: none;">
                             <div class="drop-nickname-box">
                                 <div class="drop-nickname">
                                 </div>
                                 <div style="width: 100%;height: 2px">
                                     <hr style="width: 100%;">
                                 </div>
                             </div>
                              <div class="drop-info-box">
                                  <div class="drop-info-fans">
                                      <div class="drop-info-one fans-info">0</div>
                                      <div class="drop-info-msg">粉丝</div>
                                  </div>
                                  <div class="drop-info-concern">
                                       <div class="drop-info-one following-info">0</div>
                                      <div class="drop-info-msg">关注</div>
                                  </div>
                                  <div class="drop-info-thumbs">
                                      <div class="drop-info-one support-info">0</div>
                                      <div class="drop-info-msg">获赞</div>
                                  </div>
                              </div>
                              <div class="drop-nav-box">
                                  <div style="width: 100%;height: 1px;margin-bottom: 20px">
                                      <hr style="width: 100%">
                                  </div>
                                  <div class="drop-info-option personal-center-option">
                                      <span class="glyphicon glyphicon-user drop-info-icon" aria-hidden="true"></span>
                                      个人中心
                                  </div>
                                  <div class="drop-info-option column-manage">
                                      <span class="glyphicon glyphicon-education drop-info-icon" aria-hidden="true"></span>
                                      专栏管理
                                  </div>
                                  <div class="drop-info-option content-manage-option">
                                      <span class="glyphicon glyphicon-file drop-info-icon" aria-hidden="true"></span>
                                      内容管理
                                  </div>
                              </div>
                              <div class="drop-exit-box">
                                  <div class="drop-info-option drop-exit-option">
                                      <span class="glyphicon glyphicon-log-in drop-info-icon" aria-hidden="true"></span>
                                      退出
                                  </div>
                              </div>
                          </div>
                      </li>
                      <li class="user-login-register" style="display: none;"><a href="#">登录/注册</a> </li>
                      <li class="user-personal-center"><a href="#">个人中心</a></li>
                      <li class="user-content-manage"><a href="#">内容管理</a></li>
                      <li class="creat-center"><a href="#">创作中心</a></li>
                      <li>
                         <button class="btn btn-write-blog">
                             <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                             发布博客
                         </button>
                      </li>
                  </ul>
              </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
      </nav>
      <!--广告栏-->
      <div class="row" style="margin-bottom: 8px;">
          <div class="col-md-offset-2 col-md-8">
              <img src="../static/imgs/ad.png" alt="" style="width: 100%">
          </div>
      </div>
      <!--轮播图-->
      <div class="row">
      <div id="carousel-example-generic" class="carousel slide col-md-offset-2 col-md-8" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators rotationMap_dots">
              <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
              <li data-target="#carousel-example-generic" data-slide-to="1"></li>
              <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox" style="height: 600px">
              <div class="item active rotationMap_item" >
                  <img src="../static/imgs/rotation1.jpeg" alt="..." style="height: 100%;width: 100%">

              </div>
              <div class="item rotationMap_item">
                  <img src="../static/imgs/rotation2.jpeg" alt="..." style="height: 100%;width: 100%">

              </div>
              <div class="item rotationMap_item">
                  <img src="../static/imgs/rotation3.jpeg" alt="..." style="height: 100%;width: 100%">
              </div>

          </div>

      </div>
      </div>
      <!--热门推荐-->
      <div class="container">
          <div class="page-header head-style">
              <h3>热门推荐</h3>
          </div>
          <div class="row">
              <div class="col-md-12 hot-list">
              <div class=" col-md-12 hot_item zero_padding">
                 <div class="hot_content">
                     <h4>JavaScript</h4>
                     <h5>2022/7/18</h5>
                     <div class="hot_word">
                         引入JavaScript什么JavaScript的组成部分在html中引入引入JavaScript什么JavaScript的组成部分在html中引入引入JavaScript什么JavaScript的组成部分在html中引入引入JavaScript什么JavaScript的组成部分在html中引入
                     </div>
                 </div>
              </div>
              <div class=" col-md-12 hot_item zero_padding">
                  <div class="hot_content">
                      <h4>JavaScript</h4>
                      <h5>2022/7/18</h5>
                      <div class="hot_word">
                          引入JavaScript什么
                          JavaScript的组成部分
                          在html中引入
                      </div>
                  </div>
              </div>
              <div class=" col-md-12 hot_item zero_padding">
                  <div class="hot_content">
                      <h4>JavaScript</h4>
                      <h5>2022/7/18</h5>
                      <div class="hot_word">
                          引入JavaScript什么
                          JavaScript的组成部分
                          在html中引入
                      </div>
                  </div>
              </div>
              <div class=" col-md-12 hot_item zero_padding">
                  <div class="hot_content">
                      <h4>JavaScript</h4>
                      <h5>2022/7/18</h5>
                      <div class="hot_word">
                          引入JavaScript什么
                          JavaScript的组成部分
                          在html中引入
                      </div>
                  </div>
              </div>
              </div>
          </div>
      </div>
      <!--最新博文-->
      <div class="container">
          <div class="page-header head-style">
              <h3>最新博文</h3>
          </div>
          <div class="row">
              <div class="col-md-12 recent_list">
              <div class=" col-md-12 recent_item zero_padding" blog_id="">
                  <div class="hot_content">
                      <h4>JavaScript</h4>
                      <h5>2022/7/18</h5>
                      <div class="hot_word">
                          引入JavaScript什么
                          JavaScript的组成部分
                          在html中引入
                      </div>
                  </div>
              </div>
              <div class=" col-md-12 recent_item zero_padding">
                  <div class="hot_content">
                      <h4>JavaScript</h4>
                      <h5>2022/7/18</h5>
                      <div class="hot_word">
                          引入JavaScript什么
                          JavaScript的组成部分
                          在html中引入
                      </div>
                  </div>
              </div>
              <div class=" col-md-12 recent_item zero_padding">
                  <div class="hot_content">
                      <h4>JavaScript</h4>
                      <h5>2022/7/18</h5>
                      <div class="hot_word">
                          引入JavaScript什么
                          JavaScript的组成部分
                          在html中引入
                      </div>
                  </div>
              </div>
              <div class=" col-md-12 recent_item zero_padding">
                  <div class="hot_content">
                      <h4>JavaScript</h4>
                      <h5>2022/7/18</h5>
                      <div class="hot_word">
                          引入JavaScript什么
                          JavaScript的组成部分
                          在html中引入
                      </div>
                  </div>
              </div>
              </div>
          </div>
      </div>
      <!--JS代码-->
      <script>
          let verify=0;
          /*页面初始化事件*/
          $(function () {
              /*jvw验证*/
               jwt_verify();
              /*获取热门推荐*/
              get_hot_blog();
              /*获取最新博文*/
              get_recent_blog();
          })

          /*展示热门推荐*/
          function push_hot_blog(data) {
               $(".hot-list").append(` <div class=" col-md-12 hot_item zero_padding" blog_id=${data['id']}>
                 <div class="hot_content">
                     <h4>${data['article_title']}</h4>
                     <h5>${data['create_time']}</h5>
                     <div class="hot_word">
                        ${data['content_text']}
                     </div>
                 </div>
              </div>`);
          }

          /*展示最新博文*/
          function push_recent_blog(data) {
                 $(".recent_list").append(`<div class=" col-md-12 recent_item zero_padding" blog_id=${data['id']}>
                  <div class="hot_content">
                      <h4>${data['article_title']}</h4>
                      <h5>${data['create_time']}</h5>
                      <div class="hot_word">
                          ${data['content_text']}
                      </div>
                  </div>
              </div>`);
          }

          /*获取最新博文*/
          function get_recent_blog() {
              let url='http://localhost:8080/articleServlet?action=get_latest_blog'
              axios({
                  method: "GET",
                  url:url,
              }).then(function (res) {
                    console.log(res);
                  let data1=res['data']['data'];
                  $(".recent_list").empty();
                  for(let i=0;i<data1.length;i++){
                      data1[i]['create_time']=data1[i]['create_time'].substring(0,10);
                      push_recent_blog(data1[i]);
                  }
                  /*浏览博客*/
                  $(".recent_item").click(function () {
                        if(verify===0){
                             modal("登录之后再进行操作");
                        }else{
                            window.open("ViewBlog.html?blog_id=" + $(this).attr("blog_id"));
                        }
                  })
              })
          }

          /*获取热门推荐*/
          function get_hot_blog() {
              let url='http://localhost:8080/articleServlet?action=get_hot_blog'
              axios({
                  method: "GET",
                  url:url,
              }).then(function (res) {
                    console.log(res);
                  let data1=res['data']['data'];
                  $(".hot-list").empty();
                  for(let i=0;i<data1.length;i++){
                      data1[i]['create_time']=data1[i]['create_time'].substring(0,10);
                      push_hot_blog(data1[i]);
                  }
                  /*浏览博客*/
                  $(".hot_item").click(function () {
                      if(verify===0)
                      {
                          modal("请登录之后再操作");
                      }else {
                          window.open("ViewBlog.html?blog_id=" + $(this).attr("blog_id"));
                      }
                  })
              })
          }


          /*发布博客*/
          $(".btn-write-blog").click(function () {
              let url = 'http://localhost:8080/userServlet?action=judge_user_status'
              axios({
                  method: 'GET',
                  url: url,
                  params:{
                      userid:window.localStorage.getItem("email"),
                  },
              }).then(function (res) {
                  if(res.data.code===200)
                  {const avatar=$(".user-head").attr("src");
                  window.location.href=encodeURI("WriteBlogPage.html?avatar="+avatar);
                  }else{
                      modal("登录之后才能发布博客")
                  }
              })
          })

          /*搜索按钮*/
          $(".search-blog").click(function () {
              if(verify===0)
              {
                  modal("请登录之后再操作");
              }else {
                  const searchText = $(".search-input").val();
                  //通过？传参且转码
                  window.location.href = encodeURI("SearchPage.html?searchText=" + searchText);
              }
          })

          /*个人中心*/
          $(".user-personal-center").click(function () {
              location.href="PersonalCenter.html";
          })

          /*jwt验证函数*/
          function jwt_verify() {
               let url='http://localhost:8080/userServlet?action=get_user_msg'
              axios({
                   method: "GET",
                  url:url,
              }).then(function (res) {
                   console.log(res);
                   /*jwt验证成功展示用户头像*/
                   if(res.data.code===200) {
                       verify=1;
                       get_user_success();
                       let data = res['data'];
                       $(".user-head").attr("src",data['data']['headpicture']);
                       $(".drop-nickname").html(data['data']['nickname']);
                       window.localStorage.setItem("avatar",data['data']['headpicture']);
                       window.localStorage.setItem("nickname",data['data']['nickname']);
                       window.localStorage.setItem("gender",data['data']['gender']);
                       window.localStorage.setItem("borndate",data['data']['borndate']);
                       window.localStorage.setItem("userid",data['data']['username']);
                       window.localStorage.setItem("region",data['data']['region']);
                       window.localStorage.setItem("intro",data['data']['intro']);
                   }else{
                       verify=0;
                        window.localStorage.removeItem("email");
                        window.localStorage.removeItem("avatar");
                       $(".user-head-icon").hide();
                       $(".user-login-register").show();
                   }
              })

          }

          /*获取用户成就*/
          function get_user_success() {
              let url='http://localhost:8080/userServlet?action=get_user_success'
              axios({
                  method: "GET",
                  url:url,
                  params: {
                      email:window.localStorage.getItem("email")
                  }
              }).then(function (res) {
                      console.log(res);
                      let data=res['data'];
                     $(".fans-info").html(data['data']['fans_number']);
                     $(".following-info").html(data['data']['following_number']);
                     $(".support-info").html(data['data']['support_number']);
              })
          }

          //设置轮播图播放间隔时间为2秒
          $(".carousel").carousel({
              interval:2000
          })

          /*用户退出*/
          $(".drop-exit-option").click(function () {
               exit();
          })

          /*跳转到个人中心*/
          $(".personal-center-option").click(function () {
              location.href="PersonalCenter.html";
          })

          /*设置下拉界面的动画*/
          {
              $(".user-head").mouseenter(function () {
                  $(".drop-box").fadeIn(250);
                  $(".drop-box").show();
              })
              $(".user-head").mouseout(function () {
                  $(".drop-box").hide();
              })
              $(".drop-box").mouseenter(function () {
                  $(".drop-box").show();
                  console.log("移入");
              })
              $(".drop-box").mouseout(function () {
                  $(".drop-box").hide();
                  console.log("移出");
              })
              $(".drop-box").mousemove(function () {
                  $(".drop-box").show();
              })

          }

          /*退出函数*/
          function exit() {
              let url="http://localhost:8080/userServlet?action=user_exit";
              axios({
                  method:"GET",
                  url:url,
                  params:{
                      userid:window.localStorage.getItem("email"),
                  }
              }).then(function (res) {
                  console.log(res);
                  window.localStorage.removeItem("email");
                  location.reload();
              })
          }

          /**
           *  创作中心
           */
          $(".creat-center").click(function () {
              let url = 'http://localhost:8080/userServlet?action=judge_user_status'
              axios({
                  method: 'GET',
                  url: url,
                  params:{
                      userid:window.localStorage.getItem("email"),
                  },
              }).then(function (res) {
                  if(res.data.code===200)
                  {   window.localStorage.setItem("CreatCenter",".nav-Home");
                      location.href="CreatCenter.html";
                  }else{
                      modal("登录之后再进行操作");
                  }
              })
          })

          /*下拉框中的内容管理*/
          $(".content-manage-option").click(function () {
                $(".user-content-manage").click();
          })

          /*内容管理*/
          $(".user-content-manage").click(function () {
              let url = 'http://localhost:8080/userServlet?action=judge_user_status'
              axios({
                  method: 'GET',
                  url: url,
                  params:{
                      userid:window.localStorage.getItem("email"),
                  },
              }).then(function (res) {
                  if(res.data.code===200)
                  {   window.localStorage.setItem("CreatCenter",".nav-content-manage");
                      location.href="CreatCenter.html";
                  }else{
                      modal("登录之后再进行操作");
                  }
              })
          })

          /*专栏管理*/
          $(".column-manage").click(function () {
              let url = 'http://localhost:8080/userServlet?action=judge_user_status'
              axios({
                  method: 'GET',
                  url: url,
                  params:{
                      userid:window.localStorage.getItem("email"),
                  },
              }).then(function (res) {
                  if(res.data.code===200)
                  {   window.localStorage.setItem("CreatCenter",".nav-column-manage");
                      location.href="CreatCenter.html";
                  }else{
                      modal("登录之后再进行操作");
                  }
              })
          })

          /*登录注册*/
          $(".user-login-register").click(function () {
              location.href="login.html";
          })

          /*模态框函数*/
          function modal(content) {
              $('.modal-body').html(content);
              $("#myModal").modal("show");
          }


          /*logo*/
          $(".navbar-brand").click(function () {
                 location.reload();
          })

      </script>
</body>

</html>